<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>个人博客静态网页模板</title>
		<link rel="stylesheet" href="./css/normalize.css" />
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div class="banner">
			<div class="content">
				<div class="avatar">
					<img src="./img/logo.jpg" alt="头像" />
				</div>

				<p class="title" id="title"></p>
				<p class="desc">分享快乐，分享知识，分享感动！</p>
			</div>
		</div>
		<nav>
			<ul>
				<li><a href="./index.html">首页</a></li>
				<li><a href="./article.html">文章</a></li>
				<li><a href="./project.html">项目</a></li>
				<li><a href="./category.html">分类</a></li>
				<li><a href="./about.html">关于</a></li>
			</ul>
		</nav>
		<div class="main">
			<div class="w">
				<div class="left">
					<div class="user_info">
						<div class="avatar">
							<img src="./img/logo.jpg" alt="头像" />
						</div>
						<p>llvyr</p>
						<div class="tip">
							<div class="tip_item">
								<span>文章</span>
								<span>27</span>
							</div>
							<div class="tip_item">
								<span>文章</span>
								<span>27</span>
							</div>
							<div class="tip_item">
								<span>文章</span>
								<span>27</span>
							</div>
						</div>
						<div class="desc">
							<h1>善良的人永远是受苦的</h1>
							<p>然而,宝剑锋从磨砺出，梅花香自苦寒来_</p>
						</div>
						<div class="notice">公告 : 前端开发</div>
						<div class="picture">
							<h3>最新动态</h3>
							<ul>
								<li>
									<a href="#">
										<div class="cover">
											<img src="./img/bannerBg.jpg" alt="文章封面" />
										</div>
										<div class="artical_info">
											<p class="article">你好，vue</p>
											<p class="time">2021/2/15</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="cover">
											<img src="./img/bg.jpg" alt="文章封面" />
										</div>
										<div class="artical_info">
											<p class="article">你好，vue</p>
											<p class="time">2021/2/15</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="cover">
											<img src="./img/category.jpg" alt="文章封面" />
										</div>
										<div class="artical_info">
											<p class="article">你好，vue</p>
											<p class="time">2021/2/15</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<h3>搜索</h3>
						<div class="search">
							<input type="text" placeholder="请输入关键字" />
							<span>搜索</span>
						</div>
					</div>
					<div class="user_article">
						<h3>推荐阅读</h3>
						<ul>
							<li><a href="#">vue3中的最新api</a></li>
							<li><a href="#">vue3中的最新api</a></li>
							<li><a href="#">vue3中的最新api</a></li>
							<li><a href="#">vue3中的最新api</a></li>
							<li><a href="#">vue3中的最新api</a></li>
						</ul>
						<h3>文档归类</h3>
						<div class="public_time">
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
							<div class="time_item">
								<span>2021年1月</span> <span>10篇</span>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="article_item">
						<div class="cover">
							<img src="./img/bannerBg.jpg" alt="文章封面" />
						</div>
						<div class="desc">
							<div class="title">明天你好，与你携手共进</div>
							<div>
								<i>图标</i><span>发表于</span> <span>|</span><i>图标</i>
								<span>progect</span>
							</div>

							<p>
								Node + vue + Mysql前言
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
							</p>
						</div>
					</div>
					<div class="article_item">
						<div class="cover">
							<img src="./img/category.jpg" alt="文章封面" />
						</div>
						<div class="desc">
							<div class="title">明天你好，与你携手共进</div>
							<div>
								<i>图标</i><span>发表于</span> <span>|</span><i>图标</i>
								<span>progect</span>
							</div>

							<p>
								Node + vue + Mysql前言
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
							</p>
						</div>
					</div>
					<div class="article_item">
						<div class="cover">
							<img src="./img/bg2.jpg" alt="文章封面" />
						</div>
						<div class="desc">
							<div class="title">明天你好，与你携手共进</div>
							<div>
								<i>图标</i><span>发表于</span> <span>|</span><i>图标</i>
								<span>progect</span>
							</div>

							<p>
								Node + vue + Mysql前言
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
							</p>
						</div>
					</div>
					<div class="article_item">
						<div class="cover">
							<img src="./img/bg.jpg" alt="文章封面" />
						</div>
						<div class="desc">
							<div class="title">明天你好，与你携手共进</div>
							<div>
								<i>图标</i><span>发表于</span> <span>|</span><i>图标</i>
								<span>progect</span>
							</div>

							<p>
								Node + vue + Mysql前言
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
							</p>
						</div>
					</div>
					<div class="article_item">
						<div class="cover">
							<img src="./img/article.jpg" alt="文章封面" />
						</div>
						<div class="desc">
							<div class="title">明天你好，与你携手共进</div>
							<div>
								<i>图标</i><span>发表于</span> <span>|</span><i>图标</i>
								<span>progect</span>
							</div>

							<p>
								Node + vue + Mysql前言
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
								本篇是个人结合自己开发过程中对Node、vue和mysql结合的理解
								在查阅很多资料后由于网上很少有综合的模板，为了以后做模板也为了做近期的总结。
								完成了基
							</p>
						</div>
					</div>
					<div class="pagination">
						<li><a href="#">上一页</a></li>
						<ul>
							<li><a href="#">1</a></li>
						</ul>
						<li><a href="#">下一页</a></li>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="avatar">
				<img src="./img/logo.jpg" alt="" />
			</div>
			<div class="info">
				<h1>llvyrCode</h1>
				<p>分享快乐，分享知识，分享感动！</p>
			</div>
		</div>

		<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
		<script>
			var typed = new Typed('#title', {
				strings: ['一百个梦里99个你*', 'Have a great day!'],
				typeSpeed: 100,
				backSpeed: 100,
				backDelay: 700,
				fadeOutDelay: 500,
				loop: true,
				loopCount: Infinity,
			})
		</script>
	</body>
</html>
